{% set uniqid = uniqid ?? uniqid('machine_') %}
{% set idBase = "vagrantfile-vm-provider-rackspace-machines-#{uniqid}" %}
{% set nameBase = "vagrantfile[vm][provider][rackspace][machines][#{uniqid}]" %}

<div id="{{ idBase }}" data-uniqid="{{ uniqid }}" data-name="{{ nameBase }}"
     class="tab-pane {{ active is defined and active ? 'active' }}">
    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-id">
            Internal Identifier
        </label>
        <input type="text" id="{{ idBase }}-id"
               name="{{ nameBase }}[id]"
               placeholder="rackspace1" class="form-control"
               value="{{ machine.id }}" />
        <div class="help-block">
            This is the ID used within the <code>Vagrantfile</code>. It is only used
            for your internal identification.
        </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-hostname">
            Hostname
        </label>
        <input type="text" id="{{ idBase }}-hostname"
               name="{{ nameBase }}[hostname]"
               placeholder="rackspace1.puphpet" class="form-control"
               value="{{ machine.hostname }}" />
        <div class="help-block">
            The hostname the machine should have.
            <a href="http://stackoverflow.com/a/3523068/446766"
               target="_blank">This answer lists all valid characters.</a>
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-server_name">
            Server Name
        </label>
        <input type="text" id="{{ idBase }}-server_name"
               name="{{ nameBase }}[server_name]"
               placeholder="rackspace1-puphpet" class="form-control"
               value="{{ machine.server_name }}" />
        <div class="help-block">
            Name your Rackspace server as it will appear in the Rackspace Control Panel.
        </div>
    </div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-region">
            Datacenter Location
        </label>
        <select id="{{ idBase }}-region"
                name="{{ nameBase }}[region]"
                class="form-control select-tag">
            {% for key, region in regions %}
                <option value="{{ key }}"
                    {% if key == machine.region %}selected{% endif %}>{{ region }}</option>
            {% endfor %}
        </select>
        <div class="help-block">
            Choose the one closest to you, or your target audience!
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="form-group col-xs-12 col-sm-6">
        <label for="{{ idBase }}-size">
            Server Size
        </label>
        <select id="{{ idBase }}-size"
                name="{{ nameBase }}[size]"
                class="form-control select-tag">
            {% for size in sizes %}
                <option value="{{ size }}"
                    {% if size == machine.size %}selected{% endif %}>{{ size }}</option>
            {% endfor %}
        </select>
        <div class="help-block">
            <a href="http://www.rackspace.com/cloud/public-pricing/"
               target="_blank">Pricing information</a>.
            Rackspace charges by the hour, but also shows what a full month would cost.
        </div>
    </div>

    <div class="clearfix"></div>
</div>
